﻿<UserControl x:Class="USM_TouchControls.TouchVideoPlayer"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:cv="clr-namespace:USM_TouchControls.Converters"
             MouseDown="UserControl_MouseDown" TouchDown="UserControl_TouchDown"
             Unloaded="UserControl_Unloaded"
             mc:Ignorable="d" IsManipulationEnabled="True"              
             Height="480" Width="640" >
    <UserControl.Background>
        <RadialGradientBrush Center="0.5,0.8" GradientOrigin="0.5,1">
            <GradientStop Color="#FF002676" Offset="0" />
            <GradientStop Color="Black" Offset="0.844" />
        </RadialGradientBrush>
    </UserControl.Background>
    <UserControl.Resources>

        <Storyboard x:Key="SB_OpenPnlControl">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="pnlControl">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="SB_ClosePnlControl">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="pnlControl">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid x:Name="MainGrid"  RenderTransformOrigin="0.5, 0.5">
                            <Grid.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform />
                                    <SkewTransform />
                                    <RotateTransform />
                                    <TranslateTransform />
                                </TransformGroup>
                            </Grid.RenderTransform>
                            <Rectangle Margin="10" Fill="{TemplateBinding Background}" RenderOptions.BitmapScalingMode="HighQuality"  />
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition From="Pressed" GeneratedDuration="0:0:0.05" To="Normal"/>
                                        <VisualTransition From="Normal" GeneratedDuration="0:0:0.05" To="Pressed"/>
                                        <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.05" To="Pressed"/>
                                        <VisualTransition From="Pressed" GeneratedDuration="0:0:0.05" To="MouseOver"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver" />
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" 
                                                                       Storyboard.TargetName="MainGrid">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0.85"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" 
                                                                       Storyboard.TargetName="MainGrid">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0.85"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" Value="0.5" />
                            </Trigger>
                            <EventTrigger RoutedEvent="Button.Click">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Duration="0:0:0.05" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" 
                                                                       Storyboard.TargetName="MainGrid">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.85"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Duration="0:0:0.05" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" 
                                                                       Storyboard.TargetName="MainGrid">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.85"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type Slider}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Slider}">
                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <TickBar x:Name="TopTick" Visibility="Collapsed" Fill="{TemplateBinding Foreground}" Placement="Top" Height="4" Grid.Row="0"/>
                                <TickBar x:Name="BottomTick" Visibility="Collapsed" Fill="{TemplateBinding Foreground}" Placement="Bottom" Height="4" Grid.Row="0"/>
                                <Border x:Name="TrackBackground" 
                             Background="{DynamicResource HorizontalSliderTrackNormalBackground}"
                             BorderBrush="{DynamicResource HorizontalSliderTrackNormalBorder}"                                        
                             BorderThickness="1" CornerRadius="1"
                             Margin="5,0" VerticalAlignment="Center" Height="8" Grid.Row="1" >
                                    <Canvas Margin="-6,-1">
                                        <Rectangle Visibility="Hidden" x:Name="PART_SelectionRange" Height="4.0"
                                     Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
                                     Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"
                                     StrokeThickness="1.0"/>
                                    </Canvas>
                                </Border>
                                <Track x:Name="PART_Track" Grid.Row="1">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{DynamicResource SliderRepeatButtonStyle}" />
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{DynamicResource SliderRepeatButtonStyle}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb x:Name="Thumb" Background="Black" Style="{DynamicResource CustomThumbForSlider}"/>
                                    </Track.Thumb>
                                </Track>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Rectangle Fill="Transparent"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="CustomThumbForSlider" TargetType="{x:Type Thumb}">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Ellipse Height="40" Width="40">
                            <Ellipse.Fill>
                                <RadialGradientBrush>
                                    <GradientStop Color="#FF272776" Offset="1" />
                                    <GradientStop Color="#FF58A7F6" Offset="0" />
                                    <GradientStop Color="#FF4777D7" Offset="0.246" />
                                </RadialGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <SolidColorBrush x:Key="HorizontalSliderTrackNormalBackground" Color="#FFE7EAEA"/>
        <LinearGradientBrush x:Key="HorizontalSliderTrackNormalBorder" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFAEB1AF" Offset="0.1"/>
            <GradientStop Color="White" Offset=".9"/>
        </LinearGradientBrush>

        <cv:TimeConverterFormatter x:Key="TimeConverterFormatter1" />
    </UserControl.Resources>

    <Grid Name="MainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="7*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>
        <MediaElement x:Name="myMediaElement" Grid.RowSpan="2"
                      LoadedBehavior="Manual" UnloadedBehavior="Manual" Stretch="UniformToFill"                      
                      Source="{Binding Video, Mode=OneWay}" Volume="{Binding Volume, Mode=OneWay}" />
        <Grid Grid.Row="1" x:Name="pnlControl" RenderTransformOrigin="0.5,1">
            <Grid.Background>
                <ImageBrush ImageSource="images/controlbar.png" />
            </Grid.Background>
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*" />
                <ColumnDefinition Width="2*" />
                <ColumnDefinition Width="2*" />
                <ColumnDefinition Width="4*" />
                <ColumnDefinition Width="4*" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Name="Play" Click="Play_Click" TouchDown="Play_TouchDown" IsEnabled="{Binding IsNotPlaying, Mode=OneWay}" IsHitTestVisible="True">
                <Button.Background>
                    <ImageBrush ImageSource="/USM_TouchControls;component/images/play.png" />
                </Button.Background>
            </Button>
            <Button Grid.Column="1" Name="Pause" Click="Pause_Click" TouchDown="Pause_TouchDown" IsEnabled="{Binding IsPlaying, Mode=OneWay}">
                <Button.Background>
                    <ImageBrush ImageSource="/USM_TouchControls;component/images/pause.png" />
                </Button.Background>
            </Button>
            <Button Grid.Column="2" Name="Stop" Click="Stop_Click" TouchDown="Stop_TouchDown" IsEnabled="{Binding IsPlaying, Mode=OneWay}">
                <Button.Background>
                    <ImageBrush ImageSource="/USM_TouchControls;component/images/stop.png" />
                </Button.Background>
            </Button>
            <Slider Grid.Column="3" VerticalAlignment="Center" Value="{Binding Volume, Mode=TwoWay}" Minimum="0" Maximum="1" LargeChange="0.3" 
                    TouchDown="Slider_TouchDown" TouchMove="Slider_TouchMove" Visibility="Collapsed" />
            <Viewbox Grid.Column="4">
                <TextBlock  VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10"
                       Text="{Binding Mode=OneWay, Path=Position, Converter={StaticResource TimeConverterFormatter1}}" 
                       Foreground="#FF4573D4" FontFamily="Lucida Console" />
            </Viewbox>
        </Grid>
    </Grid>
</UserControl>
